<template>
  <div class="box">
    <!-- 头部搜索表单 -->
    <div class="form">

      <el-form ref="form" :model="form">

        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="快递员账号:" label-width="110px">
              <el-input v-model="form.account" style="width:280px;" placeholder="请输入快递员账号" />
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="快递员姓名:">
              <el-input v-model="form.name" style="width:280px;" placeholder="请输入快递员姓名" />
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="快递员手机号:">
              <el-input v-model="form.phone" style="width:280px;" placeholder="请输入快递员手机" />
            </el-form-item>
          </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="110px" label="所属机构:">
              <el-select
                ref="select"
                value=""
                style="width:280px;"
                :placeholder="valu?valu:`请选择所属机构`"
              >
                <el-option value="valu">
                  <el-tree
                    :data="list"
                    :props="defaultProps"
                    :check-on-click-node="true"
                    @node-click="handleNodeClick"
                  />
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </div>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <!-- 列表 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="500"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          prop="row"
          label="序号"
          width="90"
        />
        <el-table-column
          prop="account"
          label="快递员账号"
          width="200"
        />
        <el-table-column
          prop="name"
          label="快递员姓名"
          width="300"
        />
        <el-table-column
          prop="mobile"
          label="快递员电话"
          width="240"
        />
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="375"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          width="180"
        >
          <template v-slot="{ row }">
            <span v-if="row.workStatus === 0">休息</span>
            <span v-else-if="row.status === 1">上班</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <el-button type="text" @click="$router.push('/branches/MapContent')">作业范围分配</el-button>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <!-- <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"

    </el-pagination>
  </div> -->
    <div class="foot">
      <el-pagination
        :page-size="+form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="+form.page"
        :total="+total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getBusinessHall } from '@/api/branches'
import { replaceKeyNameWithLabelInArray } from '@/utils/index'
import { getManagerTree } from '@/api/essential'
export default {
  data() {
    return {
      valu: '',
      form: {
        account: '',
        agentId: '',
        name: '',
        page: '1',
        pageSize: '10',
        phone: ''

      }, // 表单数据
      total: '',
      arr: {},
      tableData: [],
      list: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  async created() {
    this.getBusinessHall()
    const res = await getManagerTree()
    const arr = JSON.parse(res.data)

    this.list = replaceKeyNameWithLabelInArray(arr)
    console.log(this.list)
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getBusinessHall()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.getBusinessHall()
    },
    indexMethod(index) {
      return index + this.form.pageSize * (this.form.page - 1) + 1
    },
    async getBusinessHall() {
      const res = await getBusinessHall(this.form)
      console.log(res)
      this.tableData = res.data.items
      console.log(res.data.pages)
      this.total = res.data.counts
    },
    handleNodeClick(data) {
      console.log(data)
      this.valu = data.label
      this.form.agentId = data.id
      this.$refs.select.blur()
    },
    search() {
      this.getBusinessHall()
    },
    reset() {
      console.log(11)
      this.form.account = ''
      this.form.agentId = ''
      this.form.name = ''
      this.form.page = '1'
      this.form.pageSize = '10'
      this.form.phone = ''
      this.valu = ''
      this.getBusinessHall()
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  padding: 15px 20px;
}

.form{
  background-color: white;
  padding: 15px 20px;
}
.table{
  margin-top: 20px;
  background-color: white;
  padding: 20px 20px;
}
.foot{
   display:flex;
  justify-content: center;
}
.el-select-dropdown__item{
  height: 200px;
}
</style>
